<template>
  <view class="container">
    <BhTitle titleText="上传商铺视频" :custom-click-back="1" @click-back="clickBack"></BhTitle>
    <view style="background-color: white;padding-bottom: 1rpx;">
      <view class="header bh-row bh-justify-space-between">
        <view>通过大数据分析，有视频的店铺比没有视频的关注度更高</view>
        <!-- <image src="../images/post_add/post_add_tip_close.svg" mode="scaleToFill" class="header-close" /> -->
      </view>
      <view class="title">
        商铺视频
      </view>
      <view class="count-wrap bh-row bh-justify-space-between">
        <view class="count-pic">上传视频</view>
        <!-- <view class="count-number">1/3</view> -->
      </view>
      <view v-if="!postDto.shopVideo" class="upload-vedio-wrap" @click="uploadVideo">
        <image src="../images/post_add/post_add_upload_vedio.svg" mode="scaleToFill" class="pic-vedio" />
        <view class="pic-text">请上传一段10~60秒的商铺视频</view>
      </view>
      <view v-if="postDto.shopVideo" class="upload-vedio-wrap" style="padding-bottom: 0;position: relative;">
        <video class="pic-vedio" :src="postDto.shopVideo" style="width: 100%;height: 281rpx;margin-top: 0;" />
        <!-- <image src="../images/post_add/post_add_upload_vedio.svg" mode="scaleToFill" class="pic-vedio" />
        <view class="pic-text">请上传一段10~60秒的商铺视频</view> -->
        <image @click="onDelPicture(index)" src="../images/post_add/post_add_pic_del.svg" mode="scaleToFill" class="pic-del-btn" />
      </view>
    </view>

    <view class="tip-title">
      录制建议
    </view>
    <view class="tip-item-wrap">
      <view class="tip-prefix"></view>
      <view class="tip-content">请拍摄店铺门头及周边情况，帮助求租者更好了解您 店铺的周边环境</view>
    </view>
    <view class="tip-item-wrap">
      <view class="tip-prefix"></view>
      <view class="tip-content">漂亮的内部装修也可以是您店铺的加分项</view>
    </view>
    <view class="tip-item-wrap">
      <view class="tip-prefix"></view>
      <view class="tip-content">再加上您真人出镜介绍，就更完美了</view>
    </view>
    <view class="tip-item-wrap">
      <view class="tip-prefix"></view>
      <view class="tip-content tip-content-ac">录制虚假视频会被永久冻结账号哦</view>
    </view>

    <view style="height: 96rpx;"></view>
    <view class="continue" @click="postAdd('video', toDelImages)">
      保存
    </view>
    <view style="height: 96rpx;"></view>
  </view>
</template>

<script>
import { BackendApi } from '../../api/backend_api';
import { customUploadVideo } from '../../components/custom_views/upload-img';
import { post_add_fake_mixin } from './post_add_fake_mixin'
export default {
  components: {
  },
  mixins: [post_add_fake_mixin],
  data() {
    let that = this
    return {
      ...post_add_fake_mixin.initData(that),
      toDelImages: '',
      tmpAddImages: '',
    }
  },
  computed: {},
  methods: {
    clickBack(){
      this.delTmpAddImages()
      uni.navigateBack()
    },
    uploadVideo() {
      // this.postDto.shopVideo = 'https://bh-cmty-1256284809.cos.ap-beijing.myqcloud.com/post/e4fbdc867cd1413a94ed87460c938fd3.mp4'

      customUploadVideo(this, (res) => {
        console.log('保存视频到本地返回结果', res)
        if (res.code == 200) {
          this.postDto.shopVideo = res.data
          that.tmpAddImages = that.tmpAddImages + res.data
          // this.postDto.shopVideo = 'https://bh-cmty-1256284809.cos.ap-beijing.myqcloud.com/post/e4fbdc867cd1413a94ed87460c938fd3.mp4'
          // 
        }
      })
    },
    onDelPicture(index) {
      let that = this
      uni.showModal({
        title: '删除视频',
        content: '是否删除视频？',
        cancelColor: '#FF6430',
        showCancel: true,
        cancelText: '取消',
        confirmColor: '#666666',
        confirmText: '确定',
        success: function (res) {
          if (res.confirm) {
            console.log('点击了确定', res)
            that.toDelImages = that.toDelImages + that.postDto.shopVideo
            // BackendApi.v05_tencentCos_delImage({fileUrl: encodeURIComponent(that.postDto.shopVideo)}, false).then(res => {
            //   console.log('删除cos中图片返回', res)
            // })
            that.postDto.shopVideo = ''
          } else if (res.cancel) {
            console.log('用户取消注销');
          }
        }
      })
      // let ary = this.postDto.facadePicture.split(',')
      // ary.splice(index, 1)
      // this.postDto.facadePicture = ary.join(',')
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
  height: 100vh;
}

.container {
  background-color: #F5F9FA;
  width: 100%;
  height: 100vh;
}

.header {
  background: rgba(248, 113, 71, 0.1);
  font-size: 24rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  padding: 16rpx 32rpx;

  color: #F87147;

  .header-close {
    width: 36rpx;
    height: 36rpx;
    display: block;
  }
}

.title {
  margin-top: 24rpx;
  margin-left: 32rpx;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 40rpx;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
}

.count-wrap {
  margin-top: 56rpx;
  margin-left: 32rpx;
  margin-bottom: 32rpx;
  font-size: 28rpx;
  font-weight: normal;
  line-height: 40rpx;
  letter-spacing: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 32rpx;

  color: #666666;

  .count-pic {}

  .count-number {}
}


.upload-vedio-wrap {
  margin-left: 32rpx;
  margin-right: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 41rpx;
  opacity: 1;
  padding-bottom: 81.5rpx;
  background: #F5F5F5;
  text-align: center;

  .pic-vedio {
    width: 64rpx;
    height: 46.5rpx;
    opacity: 1;
    margin-top: 94rpx;
  }

  .pic-text {
    margin-top: 31.5rpx;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 28rpx;
    letter-spacing: 0px;

    color: #999999;
  }

  .pic-del-btn {
    width: 50rpx;
    height: 50rpx;
    top: -12.7rpx;
    right: -12.7rpx;
    position: absolute;
  }
}

.tip-title {

  font-size: 32rpx;
  font-weight: 600;
  line-height: 40rpx;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
  margin-left: 32rpx;
  margin-top: 32rpx;
}

.tip-item-wrap {
  margin-left: 32rpx;
  margin-top: 32rpx;
  margin-right: 32rpx;
  display: flex;
  align-items: center;

  .tip-prefix {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    opacity: 1;

    background: #333333;

  }

  .tip-content {
    margin-left: 32rpx;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 42rpx;
    color: #999999;
  }

  .tip-content-ac {
    color: #666666;
  }
}

.continue {
  position: absolute;
  bottom: 96rpx;
  left: 70rpx;
  right: 70rpx;
  border-radius: 48rpx;
  opacity: 1;
  padding-top: 42rpx;
  padding-bottom: 42rpx;

  background: #F8D247;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0px;

  color: rgba(0, 0, 0, 0.85);
}
</style>